<!DOCTYPE>主题展示卡片</!DOCTYPE>
<template>
	<view class="themeCard">
		<div class="cover"  @click="handleClick">
			<image src='/static/logo.png' />
		</div>
		<div class="title">{{info.title}}</div>
	</view>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue'
	export default {
		props: {
			info: Object
		},
		setup(props, context) {
			const info = reactive({ ...props.info });
			
			//点击内容跳转
			const handleClick = () => {
				uni.navigateTo({
					url: info.url
				})

			}
			
			return {
				info: info,
				handleClick
			}
		}
	}
</script>

<style lang="scss">
	.themeCard {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0.5vw;

		.cover {
			height: 70vw;
			width: 100%;
			image {
				height: 100%;
				width: 100%;
			}
		}
		.title {
			min-height: 8vw;
			font-size: 2vw;
			color: black;
			text-indent: 0.2rem;
		}
	}
</style>